import React, { useEffect, useRef, useState } from 'react'
import { Header, Loading } from 'src/components'
import { CSSTransition } from 'react-transition-group';
import BScroll from 'better-scroll'
import { imgBaseUrl } from 'src/config/env'
import { useSelector } from 'react-redux'
import { getOrderDetail } from 'src/api/getData'
import { Link } from 'react-router-dom'
import './index.scss'

const OrderDetail = () => {

    const { userInfo, orderDetail, geohash } = useSelector(state => state);
    const [showLoading, setShowLoading] = useState(true)
    const [orderData, setOrderData] = useState()
    const scrollRef = useRef()


    useEffect(() => {

        const initData = async () => {
            if (userInfo && userInfo.user_id) {
                let orderDataRes = await getOrderDetail(userInfo.user_id, orderDetail.unique_id);
                setOrderData(orderDataRes)
                setShowLoading(false)
                new BScroll(scrollRef.current, {
                    deceleration: 0.001,
                    bounce: true,
                    swipeTime: 1800,
                    onclick: true,
                });
            }
        }
        initData()
    }, [userInfo, orderDetail.unique_id])

    return <div className="page_order_detail">
        <Header title="订单详情" goBack></Header>
        {
            !showLoading && <section ref={scrollRef} className="scroll_container">
                <section className="scroll_insert">
                    <section className="order_titel">
                        <img src={imgBaseUrl + orderDetail.restaurant_image_url} alt="" />
                        <p>{orderDetail.status_bar.title}</p>
                        <p>{orderDetail.timeline_node.description}</p>
                        <Link className="order_again"
                            to={`/shop?geohash=${geohash}&id=${orderDetail.restaurant_id}`}
                        >再来一单</Link>
                    </section>
                    <section className="food_list">
                        <Link className="food_list_header"
                            to={`/shop?geohash=${geohash}&id=${orderDetail.restaurant_id}`}
                        >
                            <div className="shop_name">
                                <img src={imgBaseUrl + orderDetail.restaurant_image_url} alt="" />
                                <span>{orderDetail.restaurant_name}</span>
                            </div>
                            <svg fill="#333" className="arrow_right">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                            </svg>
                        </Link>
                        <ul className="food_list_ul">
                            {
                                orderDetail.basket.group[0].map((item, index) => {
                                    return <li key={index}>
                                        <p className="food_name ellipsis">{item.name}</p>
                                        <div className="quantity_price">
                                            <span>X{item.quantity}</span>
                                            <span>¥{item.price}</span>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                        <div className="deliver_fee">
                            <span>配送费</span>
                            <span>{(orderDetail.basket.deliver_fee && orderDetail.basket.deliver_fee.price) || 0}</span>
                        </div>
                        <div className="pay_ment">实付{orderDetail.total_amount.toFixed(2)}</div>
                    </section>
                    <section className="order_detail_style">
                        <header>配送信息</header>
                        <section className="item_style">
                            <p className="item_left">送达时间：</p>
                            <div className="item_right">
                                <p>{orderData.deliver_time}</p>
                            </div>
                        </section>
                        <section className="item_style">
                            <p className="item_left">送货地址：</p>
                            <div className="item_right">
                                <p>{orderData.consignee}</p>
                                <p>{orderData.phone}</p>
                                <p>{orderData.address}</p>
                            </div>
                        </section>
                        <section className="item_style">
                            <p className="item_left">配送方式：</p>
                            <div className="item_right">
                                <p>蜂鸟专送</p>
                            </div>
                        </section>
                    </section>
                    <section className="order_detail_style">
                        <header>订单信息</header>
                        <section className="item_style">
                            <p className="item_left">订单号：</p>
                            <div className="item_right">
                                <p>{orderDetail.id}</p>
                            </div>
                        </section>
                        <section className="item_style">
                            <p className="item_left">支付方式：</p>
                            <div className="item_right">
                                <p>在线支付</p>
                            </div>
                        </section>
                        <section className="item_style">
                            <p className="item_left">下单时间：</p>
                            <div className="item_right">
                                <p>{orderDetail.formatted_created_at}</p>
                            </div>
                        </section>
                    </section>
                </section>
            </section>
        }
        <CSSTransition classNames="loading" in={showLoading} timeout={500} unmountOnExit>
            <Loading />
        </CSSTransition>
    </div>
}

export default OrderDetail